<template>
  <div class="container">
    <h3>比例尺示例</h3>
    <h3>鹰眼控件示例</h3>
    <div id="vue-openlayers" class="map-x"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile } from 'ol/layer'
import { XYZ } from 'ol/source'
import * as control from 'ol/control'
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
            })
          })
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [116.397411, 39.909186],
          zoom: 10
        }),
        controls: control.defaults({
          zoom: false, // 禁用缩放控件
          doubleClickZoom: false, // 禁用双击缩放
          rotate: false, // 禁用旋转
          attribution: false, // 禁用版权信息
        }).extend([
          new control.ScaleLine({
            units: 'metric' // 设置比例尺单位，degrees、imperial、nautical、metric（度量单位）
          }),
          // 鹰眼控件
          new control.OverviewMap({
            collapsed: true, // 初始是否展开
            collapsible: true, // 是否可展开
            rotateWithView: true, // 是否随着地图旋转
          })
        ])
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>